<template>
  <div class="row">
    <!-- 正文开始 -->
    <div class="col-md-12">
      <div class="post type-post" v-if="article">
        <div class="container">
          <div class="row justify-content-md-center">
            <!-- 
              <div class="col-md-3">
              <div class="entry-meta text-end">
                <div class="entry-published big">25</div>
                <div class="entry-published medium">{{ article.date }}</div>
                <div class="name">by <strong>Admin</strong></div>
              </div>
            </div> 
            -->

            <div class="col-md-12">
              <div class="entry-wrapper">
                <h3 class="entry-title text-center">
                  {{ $wordpressDecodeHTML(article.title.rendered) }}
                </h3>
                <div class="entry-summary">
                  <!-- <div v-html="article.content.rendered"></div> -->
                  <iframe
                    id="articleIframe"
                    style="width: 100%"
                    scrolling="no"
                    frameborder="0"
                    :src="wordPressArticleUrl"
                  >
                  </iframe>
                </div>
                <div class="text-center">
                  <a class="button" @click="goBack()">Back</a>
                </div>
              </div>
              <div class="entry-meta-bottom">
                <div class="entry-share">
                  <span>Share:</span>
                  <ul class="social-icons">
                    <template
                      v-for="network in sharing.networks"
                      :key="network.network"
                    >
                      <li :style="{ backgroundColor: network.color }">
                        <ShareNetwork
                          :network="network.network"
                          :url="sharing.url"
                          :title="sharing.title"
                          :description="sharing.description"
                          :quote="sharing.quote"
                          :hashtags="sharing.hashtags"
                          :twitterUser="sharing.twitterUser"
                        >
                          <i :class="network.icon"></i>
                        </ShareNetwork>
                      </li>
                    </template>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 正文结束 -->
  </div>
</template>

<script>
import { getArticleById } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      article: { title: "", content: { rendered: "" } },
      wordPressArticleUrl: `/wordpress/archives/${proxy.$route.params.id}`,
      sharing: {
        url: window.location.href,
        title: "Welcome to Welons Group",
        description: "",
        quote: "",
        hashtags: "",
        twitterUser: "",
        networks: [
          {
            network: "facebook",
            name: "Facebook",
            icon: "fa fa-facebook",
            color: "#1877f2",
          },
          {
            network: "linkedin",
            name: "LinkedIn",
            icon: "fa fa-linkedin",
            color: "#007bb5",
          },
          {
            network: "twitter",
            name: "Twitter",
            icon: "fa fa-twitter",
            color: "#1da1f2",
          },
        ],
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {
      var id = proxy.$route.params.id;
      getArticleById(id).then((res) => {
        data.article = res.data;
      });
    });
    onMounted(() => {
      var iframeObj = document.getElementById("articleIframe");
      iframeObj.onload = function () {
        proxy.$iframeAutoFit(iframeObj);
      };
    });
    //
    const methods = {
      goBack() {
        proxy.$router.go(-1);
      },
    };
    //

    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.type-post {
  margin-top: 20px;
  margin-bottom: 100px;

  .entry-meta {
    position: relative;
    height: 200px;

    .entry-published.big,
    .entry-published.medium {
      position: absolute;
      right: 0;
      background: #fe4c8d;
      color: #fff;
    }

    .entry-published.big {
      top: 90px;
      padding: 3px 10px;
      font-size: 34px;
      line-height: 1;
    }

    .entry-published.medium {
      top: 132px;
      font-size: 1rem;
      padding: 5px;
      line-height: 1;
    }

    .name {
      position: absolute;
      top: 170px;
      right: 0;
    }

    .name,
    .name strong {
      color: #464d50;
      font-size: 1rem;
      line-height: 1;
    }
  }

  .entry-image {
    margin-bottom: 50px;
  }

  .entry-wrapper {
    .entry-title {
      font-size: 30px;
      font-family: "Source Sans Pro", sans-serif;
      color: #464d50;
      margin-bottom: 25px;
      line-height: 1;
    }

    .entry-summary p {
      line-height: 28px;
    }

    a.button {
      border-radius: 30px;
      padding: 20px 35px;
      line-height: 1;
      margin-top: 40px;
    }
  }

  .entry-meta-bottom {
    margin-top: 80px;
    border-top: 1px solid #e4eaec;
    border-bottom: 1px solid #e4eaec;
    padding: 12px 0;

    li,
    span {
      display: inline-block;
    }

    .entry-share {
      display: flex;
      align-items: center;
      span {
        font-size: 20px;
        line-height: 1;
        color: #464d50;
      }

      ul.social-icons {
        margin-left: 15px;
      }

      ul.social-icons li {
        float: left;
        font-size: 20px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-radius: 100%;
        margin-top: 0px;
        margin-right: 15px;
      }
    }
  }
}
</style>
